---
order: 2
title: 动画过渡
type: 动画
group: 指南和示例
label: Animation/Examples
---

本示例展示了如何在 Galacean 编辑器中实现动画过渡。通过简单的步骤，你将学习如何让一个动画过渡到另一个动画。
如果你是第一次使用动画编辑器，建议先阅读前面几篇文档：

[1.播放模型中的动画](/docs/animation/examples/playAnimation/)

[2.动画复用](/docs/animation/examples/reuseAnimation/)

## 0. 准备工作

在开始之前，我们需要有一个包含多个动画的模型。如果你没有模型，可以在点此下载 [模型](https://mdn.alipayobjects.com/oasis_be/afts/file/A*AN3aSZzEijkAAAAAAAAAAAAADkp5AQ/player.glb)。

<Callout type="positive">
  在实际项目中强烈建议将FBX模型通过Blender等第三方工具转换为GLB/GLTF格式。Galacean目前仅支持解析GLB/GLTF模型。虽然可以直接将FBX拖入编辑器进行自动转换，但这种方式可能会导致转换后的模型动画数据过大，并可能出现还原问题。使用专业工具进行转换可以更好地控制转换质量和文件大小。
</Callout>

### 导入模型
如果你不清楚如何导入模型，请参考：[导入模型](/docs/animation/examples/playAnimation/#导入模型)

## 1. 查看模型
点击模型资产上的展开按钮

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uMXwRZDzOwkAAAAAAAAAAAAADsJ_AQ/original" />

可以看到模型中包含了三个 [动画片段](/docs/animation/clip) 资产, 以及一个 [动画控制器](/docs/animation/animatorController/) 资产

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*kyhMRYgmJJwAAAAAAAAAAAAADsJ_AQ/original" />


## 2. 创建动画控制资产
想要控制模型的动画播放，需要编辑 `动画控制器` 的内容，而模型中的 `动画控制器` 是只读的，所以需要我们自己创建一个 `动画控制器` 。
如果你不知道如何创建 `动画控制器` ，请参考：[创建动画控制器](/docs/animation/examples/playAnimation/#2-创建动画控制资产)

## 3. 编辑动画控制器

1. 打开动画控制器编辑器，添加三个 `动画状态` ，分别绑定模型中的三个 `动画片段`

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*YQ8-S5XcK-wAAAAAAAAAAAAADsJ_AQ/original" />

如果你不知道如何创建 `动画状态` 并绑定 `动画片段` ，请参考：[编辑动画控制器](/docs/animation/examples/playAnimation/#3-编辑动画控制器)

2. 创建 `动画过渡`（关于动画过渡的详细介绍请参考 [动画状态机](/docs/animation/state-machine/#动画过渡) 文档的动画过渡部分）：将 `idle` 动画连接到 `entry`，并点击连线将 `Duration` 改为 0，这样在这个动画控制器被应用时，角色就会播放 `idle` 动画。

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*xONyQ76QzkMAAAAAAAAAAAAADsJ_AQ/original" />

3. 以同样的方式将 `idle` 连接到 `walk`，将 `walk` 连接到 `run`， 将 `run` 连接到 `exit`, 这样角色就会在播完 `idle` 动画后，自动过渡到 `walk` 动画，再过渡到 `run` 动画，最后到 `exit` 退出，重新进入 `entry`，来循环播放这段动画。

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*LSECTqsXywUAAAAAAAAAAAAADsJ_AQ/original" />

## 4. 使用动画控制器并预览
绑定 `动画控制器`（如果你不知道如何绑定 `动画控制器` ，请参考：[使用动画控制器](/docs/animation/examples/playAnimation/#4-使用动画控制器)文档）之后点击播放按钮，可以看到模型从 `idle` 过渡到 `walk`，再过渡到 `run`，最后退出，重新回到 `idle` 状态。

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*flHoR7W2aiwAAAAAAAAAAAAADsJ_AQ/original" />

<Callout type="positive">
  实际项目中，将 `run` 连接到 `idle` 可能是更好的选择，这样角色在播完 `run` 动画后，会过渡到 `idle` 动画，而不是直接重新播放，本示例仅是为了演示 `exit` 的效果。
</Callout>

## 用户输入控制动画
上述方式主要是为了调试动画的过渡效果，你可以修改过渡的 `Duration` , `ExitTime` , `Offset` 等参数（详细介绍请参考 [动画状态机](/docs/animation/state-machine/) 文档），来调整到合适的过渡效果。

实际项目中，动画一般不会像本示例一样自动切换，大多数情况需要结合用户输入来控制动画的切换，具体可以参考：[用户输入控制动画](/docs/animation/examples/controlAnimationByInput) 文档
